<template>
  <div id="app">
    <div class="header clearfix">
      <nav class="mui-bar mui-bar-tab clearfix">
        <div class="tabbar">
          <router-link class="mui-tab-item-aa" to="/Home">
            <div class="mui-tab-label home">
              <img :src="imgHome" class="imgHome">
            </div>
          </router-link>
        </div>
        <div class="tabbar">
          <router-link class="mui-tab-item-aa" to="/Singer">
            <div class="mui-tab-label">歌手</div>
          </router-link>
        </div>
        <div class="tabbar">
          <router-link class="mui-tab-item-aa" to="/List">
            <div class="mui-tab-label">榜单</div>
          </router-link>
        </div>
        <div class="tabbar">
          <router-link class="mui-tab-item-aa" to="/My">
            <div class="mui-tab-label">我的</div>
          </router-link>
        </div>
        <div class="tabbar">
          <router-link class="mui-tab-item-aa" to="/Search">
            <div class="mui-tab-label">搜索</div>
          </router-link>
        </div>
      </nav>
    </div>
    <!-- 内容部分 -->
    <router-view></router-view>
  </div>
</template>

<script>

export default {
  name: "App",
  data(){
    return{
      imgHome:require("./assets/img/logo.png")

    }
  }
};
</script>

<style>
.header nav {
  position: absolute;
  height: 50px;
  background-color: #f9f9f9;
  line-height: 50px;
  top: 0;
  width: 100%;
}
.header {
  height: 50px;
  
}
.header nav .tabbar {
  float: left;
  width: 20%;
  text-align: center;
  font-size: 16px;
}
.header nav .tabbar div{
  color: #999;
}
.header nav .tabbar .home{
  line-height: 0;
}
.header nav .tabbar .home img{
  height: 26px;
  border-radius: 50%;
  background-color: #20B2AA;
  margin-top: 12px;
}

</style>
